<template>
  <div class="allAlbum-container">
    <div class="album-item" v-for="al in album" :key="al.id">
      <img v-lazy="al.picUrl" alt="" />
      <p class="album-name">{{ al.name }}</p>
      <p class="album-time">{{ dayjs(al.publishTime).format("YYYY.MM.DD") }}</p>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "AllAlbum",
};
</script>

<script lang="ts" setup>
import { useRoute } from "vue-router";
import { onMounted, ref } from "vue";
import { getArtistAlbumApi } from "@/api/artist/artist";
import dayjs from "dayjs";

const route = useRoute();
const id = ref<any>(route.query.id);

const album = ref();

const getArtistAlbum = async (id: number) => {
  const res = await getArtistAlbumApi(id);
  album.value = res.hotAlbums;
};

onMounted(() => {
  getArtistAlbum(id.value);
});
</script>

<style scoped>
.allAlbum-container {
  width: 640px;
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
}
.album-item img {
  width: 120px;
  height: 120px;
}
.album-name {
  width: 120px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.album-item {
  padding: 20px;
}
</style>
